<template>
	<!-- :border="false" :fixed="false" :safeAreaInsetBottom="false" -->
	<u-tabbar v-model="current" activeColor="#000000" inactiveColor="#8b8b8b" @change="handleChange">
		<block v-for="(item,index) in tabbar" :key="index">
			<u-tabbar-item :text="item.text">
				<u--image width="48rpx" height="48rpx" slot="active-icon" :src="item.selectedIconPath"></u--image>
				<u--image width="48rpx" height="48rpx" slot="inactive-icon" :src="item.iconPath"></u--image>
			</u-tabbar-item>
		</block>
	</u-tabbar>
</template>

<script>
	export default {
		props: {
			name: {
				type: String,
				default: ''
			},
		},
		computed: {
			current() {
				return this.tabbar.length ? this.tabbar.findIndex(e => e.name === this.name) : 0
			},
		},
		data() {
			return {
				placeholderHeight: 50,
				safeAreaInsetsBottom: 12,
				tabbar: [{
						text: '工作台',
						name: 'Index',
						iconPath: '/static/tabbar/home.png',
						selectedIconPath: '/static/tabbar/home-active.png',
						pagePath: '/'
					},
					{
						text: "课表",
						name: 'Calendar',
						iconPath: "/static/tabbar/calendar.png",
						selectedIconPath: "/static/tabbar/calendar-active.png",
						pagePath: "/calendar",
					},
					{
						text: '我的',
						name: 'Mine',
						iconPath: '/static/tabbar/mine.png',
						selectedIconPath: '/static/tabbar/mine-active.png',
						pagePath: "/mine",
					}
				]
			}
		},
		methods: {
			handleChange(index) {
				const pagePath = this.tabbar[index].pagePath
				this.$Router.pushTab(pagePath);
			},
		}
	}
</script>